<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Edit features with the Editor widget</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.29/"></script>
  
  <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
  
        .esri-popup--is-docked-top-right .esri-popup__main-container {
          max-height: 100%;
        }
  
        #appContainer {
          display: flex;
          flex-direction: column;
          height: 100%;
          width: 100%;
        }
  
        #viewDiv {
          flex: 1;
          width: 100%;
        }
  
        .container {
          display: flex;
          flex: 1;
          width: 100%;
        }
  
        .switch {
          position: relative;
          display: inline-block;
          width: 45px;
          height: 22px;
          vertical-align: middle;
        }
  
        .switch input {
          opacity: 0;
          width: 0;
          height: 0;
        }
  
        .slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #ccc;
          -webkit-transition: 0.4s;
          transition: 0.4s;
        }
  
        .slider:before {
          position: absolute;
          content: "";
          height: 20px;
          width: 20px;
          left: 3px;
          bottom: 1px;
          background-color: white;
          -webkit-transition: 0.4s;
          transition: 0.4s;
        }
  
        input:checked + .slider {
          background-color: #2196f3;
        }
  
        input:focus + .slider {
          box-shadow: 0 0 1px #2196f3;
        }
  
        input:checked + .slider:before {
          -webkit-transform: translateX(20px);
          -ms-transform: translateX(20px);
          transform: translateX(20px);
        }
  
        /* Rounded sliders */
  
        .slider.round {
          border-radius: 20px;
        }
  
        .slider.round:before {
          border-radius: 50%;
        }
  
        .labelText {
          padding-left: 5px;
          font-size: 15px;
        }
  
        #mainDiv {
          padding: 8px;
        }
  </style>

  <script>
    require([
        "esri/Map",
        "esri/WebMap",
        "esri/views/MapView",
        "esri/widgets/Editor",
        "esri/layers/FeatureLayer",
        "esri/widgets/FeatureTable",
        "esri/core/reactiveUtils"        
      ], (
        Map,
        WebMap,
        MapView,
        Editor,
        FeatureLayer,
        FeatureTable,
        reactiveUtils       
      ) => {

        // Create a map 
        const map = new Map({
            //basemap: "streets-navigation-vector" 
            basemap:"satellite"
        });

       

        const view = new MapView({
            container: "viewDiv",            
            map: map,
            center:[115,35],
            zoom:4,            
            popup: {
                dockEnabled: true,
                dockOptions: {
                    buttonEnabled: false,
                    breakpoint: false
                }
            }
        });

        view.when(() => {
            let featureLayer = new FeatureLayer({
                // portalItem: {
                //   id: "3807c58dd48c4d32810042d8edf4a2fe"
                // },
                url:'http://127.0.0.1:6080/arcgis/rest/services/Sights/sights/FeatureServer/0',
                outFields: ["*"],
                title: "sights"
            });
            map.add(featureLayer); 

            // Get references to div elements for toggling table visibility
            const appContainer = document.getElementById("appContainer");
            const tableContainer = document.getElementById("tableContainer");
            const tableDiv = document.getElementById("tableDiv");

            // Create the feature table
            const featureTable = new FeatureTable({
                view: view,
                layer: featureLayer,
                visibleElements: {
                    // Autocast to VisibleElements
                    menuItems: {
                        clearSelection: true,
                        refreshData: true,
                        toggleColumns: true,
                        selectedRecordsShowAllToggle: true,
                        selectedRecordsShowSelectedToggle: true,
                        zoomToSelection: true
                    }
                },
                multiSortEnabled: true, // set this to true to enable sorting on multiple columns
                editingEnabled: true,//让featureTable的记录可以被编辑
                tableTemplate: { // autocast to TableTemplate
                    columnTemplates: [ // takes an array of GroupColumnTemplate and FieldColumnTemplate
                        { // autocast to GroupColumnTemplate
                            type: "group",
                            label: "第一组",
                            columnTemplates: [
                                {
                                  type: "field",
                                  fieldName: "objectid",
                                  label: "objectid"
                                },
                                {
                                  type: "field",
                                  fieldName: "name",
                                  label: "名称"
                                },
                                {
                                  type: "field",
                                  fieldName: "name_en",
                                  label: "名称（英文）"
                                }
                            ]
                        }, 
                        {
                            type:"group",
                            label:"第二组",
                            columnTemplates:[
                                {
                                    type: "field",
                                    fieldName: "type",
                                    label: "类型"
                                },
                                {
                                    type: "field",
                                    fieldName: "description",
                                    label: "描述"
                                },
                                {
                                    type: "field",
                                    fieldName: "province",
                                    label: "区域"
                                } 
                            ]
                        }                   
                    ]
                },
                container: document.getElementById("tableDiv")
            });
            
            // Add toggle visibility slider
            view.ui.add(document.getElementById("mainDiv"), "top-right");

            // Get reference to div elements
            const checkboxEle = document.getElementById("checkboxId");
            const labelText = document.getElementById("labelText");

            // Listen for when toggle is changed, call toggleFeatureTable function
            checkboxEle.onchange = () => {
                toggleFeatureTable();
            };

            function toggleFeatureTable() {
                // Check if the table is displayed, if so, toggle off. If not, display.
                if (!checkboxEle.checked) {
                    appContainer.removeChild(tableContainer);
                    labelText.innerHTML = "显示FeatureTable属性表";
                } else {
                    appContainer.appendChild(tableContainer);
                    labelText.innerHTML = "隐藏FeatureTable属性表";
                }
            }    


            const editor = new Editor({
                view: view
            });

            // Add the widget to the view
            view.ui.add(editor, "top-right");
            

            // Watch for the popup's visible property. Once it is true, clear the current table selection and select the corresponding table row from the popup
            reactiveUtils.watch(
                () => view.popup.viewModel?.active,
                () => {
                    selectedFeature = view.popup.selectedFeature;
                    if (selectedFeature !== null && view.popup.visible !== false) {
                        featureTable.highlightIds.removeAll();
                        featureTable.highlightIds.add(view.popup.selectedFeature.attributes.objectid);
                        id = selectedFeature.getobjectid();
                    }
                }
            );

        });//end_of_view.when()

      });
  </script>
</head>

<body> 
  <div id="appContainer">
    <div id="viewDiv"></div>
    <div id="tableContainer" class="container">
      <div id="tableDiv"></div>
    </div>
    <div id="mainDiv" class="esri-widget">
      <label class="labelText" id="labelText">隐藏属性表</label>
      <label class="switch">
        <input id="checkboxId" type="checkbox" checked="no" />
        <span class="slider round"></span>
      </label>
    </div>
  </div>
</body>

</html>